Interactive Modules

**Referenced Files in This Document** - [navigation.js](file://src/assets/js/modules/navigation.js) - [carousel-system.js](file://src/assets/js/modules/carousel-system.js) - [accordion.js](file://src/assets/js/modules/accordion.js) - [team-card-flip.js](file://src/assets/js/modules/team-card-flip.js) - [poll-bar-animation.js](file://src/assets/js/modules/poll-bar-animation.js) - [staff-knowledge-graph.js](file://src/assets/js/modules/staff-knowledge-graph.js) - [staff-knowledge-list.js](file://src/assets/js/modules/staff-knowledge-list.js) - [staff-knowledge-toc.js](file://src/assets/js/modules/staff-knowledge-toc.js) - [main.js](file://src/assets/js/main.js) - [04-navigation.css](file://src/assets/css/modules/04-navigation.css) - [08-carousel-shared-infrastructure.css](file://src/assets/css/modules/08-carousel-shared-infrastructure.css) - [11-testimonials-carousel.css](file://src/assets/css/modules/11-testimonials-carousel.css) - [12-team-grid-homepage-teaser.css](file://src/assets/css/modules/12-team-grid-homepage-teaser.css) - [26-responsive-mobile-max-width-900px.css](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css) - [27-responsive-small-mobile-max-width-600px.css](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css) - [44-knowledge-base.css](file://src/assets/css/modules/44-knowledge-base.css) - [47-staff-knowledge-scope.css](file://src/assets/css/modules/47-staff-knowledge-scope.css)

Update Summary

Changes Made

  • Added documentation for three new staff knowledge base JavaScript modules
  • Updated carousel system documentation to reflect enhanced footer menu ordering consistency
  • Added comprehensive coverage of interactive graph visualization, advanced filtering, and dynamic table of contents generation
  • Enhanced module integration patterns and accessibility considerations

Table of Contents

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Staff Knowledge Base Modules
  7. Dependency Analysis
  8. Performance Considerations
  9. Troubleshooting Guide
  10. Conclusion
  11. Appendices

Introduction

This document explains the interactive JavaScript modules that power user interface interactions across the site. It focuses on:

  • Responsive mobile menu with keyboard navigation and accessibility
  • Interactive carousels supporting swipe gestures, keyboard navigation, and dots
  • Collapsible accordion sections with smooth state transitions
  • 3D flip animations for team cards optimized for touch devices
  • Animated polling data visualization triggered on visibility
  • NEW: Staff knowledge base modules including interactive graph visualization, advanced filtering/searching, and dynamic table of contents generation

It also covers event delegation patterns, DOM manipulation strategies, animation coordination, responsive behavior, accessibility compliance, cross-browser compatibility, and performance optimization. Finally, it documents configuration options, customization parameters, and integration patterns with other components.

Project Structure

The interactive modules are organized under src/assets/js/modules and initialized in src/assets/js/main.js. Styles for navigation, carousels, team cards, knowledge base, and responsive breakpoints live under src/assets/css/modules.

graph TB
subgraph "JavaScript Modules"
NAV["navigation.js"]
CAR["carousel-system.js"]
ACC["accordion.js"]
TEAM["team-card-flip.js"]
POLL["poll-bar-animation.js"]
SKG["staff-knowledge-graph.js"]
SKL["staff-knowledge-list.js"]
SKT["staff-knowledge-toc.js"]
MAIN["main.js"]
end
subgraph "CSS Modules"
NAVCSS["04-navigation.css"]
CARCSS["08-carousel-shared-infrastructure.css"]
TESTCAR["11-testimonials-carousel.css"]
TEAMCSS["12-team-grid-homepage-teaser.css"]
KBSCOPE["47-staff-knowledge-scope.css"]
KBCSS["44-knowledge-base.css"]
R900["26-responsive-mobile-max-width-900px.css"]
R600["27-responsive-small-mobile-max-width-600px.css"]
end
MAIN --> NAV
MAIN --> CAR
MAIN --> ACC
MAIN --> TEAM
MAIN --> POLL
MAIN --> SKG
MAIN --> SKL
MAIN --> SKT
NAV --- NAVCSS
CAR --- CARCSS
CAR --- TESTCAR
TEAM --- TEAMCSS
TEAM --- R900
TEAM --- R600
SKG --- KBSCOPE
SKL --- KBSCOPE
SKT --- KBCSS
CAR --- R900
CAR --- R600

Diagram sources

  • [main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)
  • [carousel-system.js:1-170](file://src/assets/js/modules/carousel-system.js#L1-L170)
  • [accordion.js:1-35](file://src/assets/js/modules/accordion.js#L1-L35)
  • [team-card-flip.js:1-14](file://src/assets/js/modules/team-card-flip.js#L1-L14)
  • [poll-bar-animation.js:1-20](file://src/assets/js/modules/poll-bar-animation.js#L1-L20)
  • [staff-knowledge-graph.js:1-217](file://src/assets/js/modules/staff-knowledge-graph.js#L1-L217)
  • [staff-knowledge-list.js:1-99](file://src/assets/js/modules/staff-knowledge-list.js#L1-L99)
  • [staff-knowledge-toc.js:1-48](file://src/assets/js/modules/staff-knowledge-toc.js#L1-L48)
  • [04-navigation.css:1-101](file://src/assets/css/modules/04-navigation.css#L1-L101)
  • [08-carousel-shared-infrastructure.css:1-90](file://src/assets/css/modules/08-carousel-shared-infrastructure.css#L1-L90)
  • [11-testimonials-carousel.css:1-93](file://src/assets/css/modules/11-testimonials-carousel.css#L1-L93)
  • [12-team-grid-homepage-teaser.css:1-117](file://src/assets/css/modules/12-team-grid-homepage-teaser.css#L1-L117)
  • [26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [44-knowledge-base.css:1-898](file://src/assets/css/modules/44-knowledge-base.css#L1-L898)
  • [47-staff-knowledge-scope.css:1-612](file://src/assets/css/modules/47-staff-knowledge-scope.css#L1-L612)

Section sources

  • [main.js:1-37](file://src/assets/js/main.js#L1-L37)

Core Components

  • Navigation module: Toggles a mobile menu, manages focus trapping, closes on Escape, and supports click-outside behavior. Accessibility attributes are set for ARIA compliance.
  • Carousel system: Manages multiple carousels with previous/next buttons, scroll snapping, pagination dots, keyboard navigation, mouse drag-to-scroll, and responsive updates on resize. Enhanced to maintain consistency with footer menu ordering.
  • Accordion: Controls collapsible sections with explicit height and opacity transitions, ensuring only one item is open at a time.
  • Team card flip: Enables a 3D flip on team cards for touch devices, with a flipped state toggle.
  • Poll bar animation: Animates poll bar widths when elements enter the viewport using IntersectionObserver.
  • NEW: Staff knowledge graph: Interactive D3 force-directed graph visualization with zoom, pan, and tooltip functionality.
  • NEW: Staff knowledge list: Advanced filtering and searching with category and status filters.
  • NEW: Staff knowledge TOC: Dynamic table of contents generation from article headings.

Section sources

  • [navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)
  • [carousel-system.js:1-170](file://src/assets/js/modules/carousel-system.js#L1-L170)
  • [accordion.js:1-35](file://src/assets/js/modules/accordion.js#L1-L35)
  • [team-card-flip.js:1-14](file://src/assets/js/modules/team-card-flip.js#L1-L14)
  • [poll-bar-animation.js:1-20](file://src/assets/js/modules/poll-bar-animation.js#L1-L20)
  • [staff-knowledge-graph.js:1-217](file://src/assets/js/modules/staff-knowledge-graph.js#L1-L217)
  • [staff-knowledge-list.js:1-99](file://src/assets/js/modules/staff-knowledge-list.js#L1-L99)
  • [staff-knowledge-toc.js:1-48](file://src/assets/js/modules/staff-knowledge-toc.js#L1-L48)

Architecture Overview

The initialization pipeline runs on DOMContentLoaded and wires up all interactive modules. Each module encapsulates its own event listeners and DOM manipulations, with minimal coupling to other modules. Enhanced to support the new staff knowledge base modules with theme-aware styling and D3 integration.

sequenceDiagram
participant DOM as "DOM"
participant Main as "main.js"
participant Nav as "navigation.js"
participant Car as "carousel-system.js"
participant Acc as "accordion.js"
participant Team as "team-card-flip.js"
participant Poll as "poll-bar-animation.js"
participant Skg as "staff-knowledge-graph.js"
participant Skl as "staff-knowledge-list.js"
participant Skt as "staff-knowledge-toc.js"
DOM->>Main : "DOMContentLoaded"
Main->>Nav : "initNavigation()"
Main->>Team : "initTeamCardFlip()"
Main->>Car : "initCarousels()"
Main->>Acc : "initAccordion()"
Main->>Poll : "initPollAnimation()"
Main->>SkL : "initStaffKnowledgeList()"
Main->>SkG : "initStaffKnowledgeGraph()"
Main->>SkT : "initStaffKnowledgeTOC()"
Note over Nav,Car : "Each module binds its own events and manipulates DOM"

Diagram sources

  • [main.js:15-36](file://src/assets/js/main.js#L15-L36)
  • [navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [carousel-system.js:3-166](file://src/assets/js/modules/carousel-system.js#L3-L166)
  • [accordion.js:3-32](file://src/assets/js/modules/accordion.js#L3-L32)
  • [team-card-flip.js:3-11](file://src/assets/js/modules/team-card-flip.js#L3-L11)
  • [poll-bar-animation.js:3-17](file://src/assets/js/modules/poll-bar-animation.js#L3-L17)
  • [staff-knowledge-list.js:8-98](file://src/assets/js/modules/staff-knowledge-list.js#L8-L98)
  • [staff-knowledge-graph.js:10-216](file://src/assets/js/modules/staff-knowledge-graph.js#L10-L216)
  • [staff-knowledge-toc.js:9-47](file://src/assets/js/modules/staff-knowledge-toc.js#L9-L47)

Detailed Component Analysis

Navigation Module

Responsibilities:

  • Toggle mobile menu via click on the hamburger element
  • Manage active state classes and body lock
  • Set ARIA attributes for expanded state and labels
  • Focus management: trap Tab key, move focus to first link on open, restore focus on close
  • Close on Escape, click-outside, and link selection
  • Delegation-like pattern by binding to .nav-link elements within the menu

Accessibility and keyboard support:

  • ARIA-expanded toggled on the toggle element
  • ARIA-label updated to reflect current state
  • Keyboard navigation trapped inside the menu while open
  • Escape key closes the menu

Responsive behavior:

  • Styles adjust spacing, font sizes, and layout for mobile breakpoints

Integration:

  • Called during DOMContentLoaded in main.js
sequenceDiagram
participant U as "User"
participant T as "Toggle Button"
participant M as "Menu"
participant D as "Document"
U->>T : "Click"
T->>M : "Add/remove active classes<br/>body.menu-open"
T->>T : "Set aria-expanded and label"
T->>M : "Focus first link after short delay"
U->>M : "Press Tab"
M->>M : "Trap focus : shift+Tab to last, Tab to first"
U->>D : "Click outside"
D->>M : "Close if click outside menu/toggle"
U->>D : "Press Escape"
D->>M : "Close if menu open"

Diagram sources

  • [navigation.js:8-75](file://src/assets/js/modules/navigation.js#L8-L75)
  • [04-navigation.css:72-101](file://src/assets/css/modules/04-navigation.css#L72-L101)

Section sources

  • [navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)
  • [04-navigation.css:1-101](file://src/assets/css/modules/04-navigation.css#L1-L101)
  • [26-responsive-mobile-max-width-900px.css:33-48](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L33-L48)

Carousel System

Updated Enhanced to maintain consistency with footer menu ordering and improved accessibility.

Responsibilities:

  • Initialize multiple carousels with predefined identifiers including about carousel
  • Build pagination dots dynamically based on items per viewport
  • Handle previous/next clicks with smooth scroll amounts
  • Update button opacity and enable/disable states based on scroll position
  • Maintain active dot state based on closest snap point
  • Keyboard navigation: Arrow keys trigger slide changes
  • Mouse drag-to-scroll with threshold detection and click suppression after drag
  • Responsive updates on window resize
  • Enhanced: Improved accessibility with proper ARIA labels and roles

Event delegation and DOM manipulation:

  • Uses querySelectorAll and forEach to bind events to multiple instances
  • Dynamically computes snap points and renders dot elements
  • Updates styles for disabled states and active dot classes

Accessibility:

  • Sets role and labels for the carousel region and buttons
  • Provides ARIA labels for dots and buttons
  • Enhanced: Proper tabindex and keyboard navigation support

Responsive behavior:

  • Adapts item width, gap, and scroll amount per viewport width
  • Adjusts pagination and snap points on resize
flowchart TD
Start(["Init Carousels"]) --> Setup["setupCarousel(cfg)"]
Setup --> Find["Find viewport, track, items"]
Find --> Render["renderDots(): compute snap points<br/>create dot buttons"]
Render --> BindPrev["Bind prev click"]
Render --> BindNext["Bind next click"]
Render --> BindScroll["Bind scroll with passive listener"]
Render --> BindResize["Bind resize with passive listener"]
Render --> BindKeys["Bind keyboard arrows"]
Render --> BindDrag["Bind mousedown/mousemove/mouseup"]
BindScroll --> Update["updateState(): opacity/disable prev/next<br/>set active dot"]
BindResize --> ReRender["Re-render dots and update state"]
BindDrag --> Suppress["Suppress click if dragged"]
Update --> End(["Ready"])
ReRender --> End
Suppress --> End

Diagram sources

  • [carousel-system.js:14-167](file://src/assets/js/modules/carousel-system.js#L14-L167)
  • [08-carousel-shared-infrastructure.css:13-90](file://src/assets/css/modules/08-carousel-shared-infrastructure.css#L13-L90)
  • [11-testimonials-carousel.css:17-28](file://src/assets/css/modules/11-testimonials-carousel.css#L17-L28)
  • [26-responsive-mobile-max-width-900px.css:81-105](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L81-L105)

Section sources

  • [carousel-system.js:1-170](file://src/assets/js/modules/carousel-system.js#L1-L170)
  • [08-carousel-shared-infrastructure.css:1-90](file://src/assets/css/modules/08-carousel-shared-infrastructure.css#L1-L90)
  • [11-testimonials-carousel.css:1-93](file://src/assets/css/modules/11-testimonials-carousel.css#L1-L93)
  • [26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)

Accordion

Responsibilities:

  • Toggle a single accordion item open/closed
  • Close other open items to maintain single-panel behavior
  • Animate content height and opacity based on inner content height or auto

DOM manipulation:

  • Uses closest and querySelector to locate parent item and child content
  • Explicitly sets height and opacity for smooth transitions
  • Preserves original computed height for accurate animation

Integration:

  • Called during DOMContentLoaded in main.js
flowchart TD
Click(["Header Click"]) --> FindItem["Find .accordion-item and .accordion-content/.accordion-inner"]
FindItem --> IsOpen{"Item active?"}
IsOpen --> |Yes| Close["Remove active, set height 0, opacity 0"]
IsOpen --> |No| CloseOthers["Remove active from others<br/>set height 0, opacity 0"]
CloseOthers --> Open["Add active to clicked item<br/>set height to innerHeight or auto, opacity 1"]
Close --> End(["Done"])
Open --> End

Diagram sources

  • [accordion.js:4-32](file://src/assets/js/modules/accordion.js#L4-L32)

Section sources

  • [accordion.js:1-35](file://src/assets/js/modules/accordion.js#L1-L35)

Team Card Flip

Responsibilities:

  • Enable flipping of team cards on touch devices only
  • Toggle a flipped class on click to reveal back content

Responsive behavior:

  • Uses matchMedia to detect touch-only environments
  • CSS handles hover vs. tap behavior for desktop vs. mobile
sequenceDiagram
participant U as "User"
participant C as "Team Card"
U->>C : "Tap/Cick"
C->>C : "Toggle class 'flipped'"

Diagram sources

  • [team-card-flip.js:4-11](file://src/assets/js/modules/team-card-flip.js#L4-L11)
  • [12-team-grid-homepage-teaser.css:34-40](file://src/assets/css/modules/12-team-grid-homepage-teaser.css#L34-L40)

Section sources

  • [team-card-flip.js:1-14](file://src/assets/js/modules/team-card-flip.js#L1-L14)
  • [12-team-grid-homepage-teaser.css:1-117](file://src/assets/css/modules/12-team-grid-homepage-teaser.css#L1-L117)
  • [26-responsive-mobile-max-width-900px.css:164-173](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L164-L173)

Poll Bar Animation

Responsibilities:

  • Observe poll bar segments and animate width to their dataset value when intersecting
  • Unobserve after animation to avoid repeated triggers

IntersectionObserver:

  • Threshold tuned to start animation when a portion of the element is visible
  • Width set via inline style for smooth CSS transition
sequenceDiagram
participant IO as "IntersectionObserver"
participant Bar as "Poll Bar Segment"
IO->>Bar : "Intersection entry observed"
Bar->>Bar : "Set width to dataset value"
IO->>Bar : "Unobserve"

Diagram sources

  • [poll-bar-animation.js:7-17](file://src/assets/js/modules/poll-bar-animation.js#L7-L17)

Section sources

  • [poll-bar-animation.js:1-20](file://src/assets/js/modules/poll-bar-animation.js#L1-L20)

Staff Knowledge Base Modules

Staff Knowledge Graph

NEW: Interactive D3 force-directed graph visualization for staff knowledge base articles.

Responsibilities:

  • Load graph data from /staff/knowledge/graph-data.json via fetch API
  • Render force-directed graph using D3.js with zoom and pan capabilities
  • Generate category-based color palette and legend
  • Create interactive tooltips with article metadata
  • Implement drag-to-reposition nodes and click-to-navigate functionality
  • Provide reset zoom functionality

D3 Integration:

  • Force simulation with link, charge, center, and collision forces
  • Dynamic node sizing based on connection degree
  • Theme-aware styling through CSS custom properties
  • SVG-based rendering with responsive viewBox

Accessibility:

  • Proper ARIA roles and labels for interactive elements
  • Keyboard navigation support for graph controls
  • Screen reader friendly tooltips and legends
flowchart TD
Start(["Init Graph"]) --> Fetch["fetch('/staff/knowledge/graph-data.json')"]
Fetch --> Parse["Parse JSON data"]
Parse --> BuildLinks["Build title-to-id map<br/>Generate links from relatedTitles"]
BuildLinks --> ColorMap["Create category color map"]
ColorMap --> Legend["Generate legend with category dots"]
Legend --> Setup["Setup D3 SVG with viewBox"]
Setup --> Zoom["Configure zoom behavior"]
Zoom --> Sim["Initialize force simulation"]
Sim --> Links["Render links with dash pattern"]
Sim --> Nodes["Render draggable nodes with status opacity"]
Nodes --> Tooltip["Setup tooltip with metadata"]
Tooltip --> Tick["Bind tick event for animation"]
Tick --> End(["Graph Ready"])

Diagram sources

  • [staff-knowledge-graph.js:25-209](file://src/assets/js/modules/staff-knowledge-graph.js#L25-L209)

Section sources

  • [staff-knowledge-graph.js:1-217](file://src/assets/js/modules/staff-knowledge-graph.js#L1-L217)
  • [47-staff-knowledge-scope.css:440-543](file://src/assets/css/modules/47-staff-knowledge-scope.css#L440-L543)

Staff Knowledge List

NEW: Advanced filtering and searching for staff knowledge base articles.

Responsibilities:

  • Implement search functionality with real-time filtering
  • Filter by category using dropdown selection
  • Filter by status (draft, review, published, archived)
  • Hide empty sections and trailing dividers
  • Clear filters functionality
  • Support URL parameter filtering via ?tag= query string

DOM Manipulation:

  • Traverse sections and rows using data attributes
  • Dynamic display control based on filter criteria
  • Real-time statistics updates
  • Empty state handling with clear filters option

Integration:

  • Works with staff-knowledge.njk template structure
  • Uses data-* attributes for efficient querying
  • Supports multiple filter combinations
flowchart TD
Init(["Init List Filter"]) --> Query["Query DOM elements:<br/>search, category, status, sections"]
Query --> Filter["filter() function"]
Filter --> Extract["Extract values from inputs<br/>and data attributes"]
Extract --> Match["Apply match conditions:<br/>search term, category, status"]
Match --> Display["Set display: block/none"]
Display --> Visibility["Update section visibility"]
Visibility --> Divider["Hide trailing dividers"]
Divider --> Empty["Show empty state if no results"]
Empty --> End(["Filter Complete"])

Diagram sources

  • [staff-knowledge-list.js:20-67](file://src/assets/js/modules/staff-knowledge-list.js#L20-L67)

Section sources

  • [staff-knowledge-list.js:1-99](file://src/assets/js/modules/staff-knowledge-list.js#L1-L99)
  • [staff-knowledge.njk:74-94](file://src/staff-knowledge.njk#L74-L94)

Staff Knowledge TOC

NEW: Dynamic table of contents generation from article headings.

Responsibilities:

  • Automatically generate table of contents from h2 and h3 headings
  • Create unique IDs for headings based on text content
  • Generate nested list structure with proper indentation
  • Support sub-level navigation for h3 headings
  • Hide TOC when no headings are found

DOM Processing:

  • Query for headings within .knowledge-article-body
  • Sanitize and normalize heading text for ID generation
  • Create anchor links with proper hash navigation
  • Apply visual styling for sub-level items

Integration:

  • Runs only when #knowledge-toc container is present
  • Works with staff-knowledge-article.njk layout
  • Supports both main and sub-level navigation
flowchart TD
Start(["Init TOC"]) --> Query["Query headings: h2, h3 in .knowledge-article-body"]
Query --> HasHeadings{"Headings found?"}
HasHeadings --> |No| Hide["Hide container if empty"]
HasHeadings --> |Yes| CreateList["Create UL element"]
CreateList --> Process["Process each heading"]
Process --> Sanitize["Sanitize text for ID"]
Sanitize --> SetID["Set heading ID"]
SetID --> CreateLI["Create LI with anchor"]
CreateLI --> AddToList["Append to list"]
AddToList --> Next{"More headings?"}
Next --> |Yes| Process
Next --> |No| Append["Append list to container"]
Append --> End(["TOC Ready"])
Hide --> End

Diagram sources

  • [staff-knowledge-toc.js:16-39](file://src/assets/js/modules/staff-knowledge-toc.js#L16-L39)

Section sources

  • [staff-knowledge-toc.js:1-48](file://src/assets/js/modules/staff-knowledge-toc.js#L1-L48)
  • [staff-knowledge-article.njk:64-70](file://src/_includes/layouts/staff-knowledge-article.njk#L64-L70)

Dependency Analysis

  • Initialization dependency: main.js orchestrates module initialization.
  • Internal dependencies: Each module is self-contained with no cross-module imports.
  • CSS dependencies: Navigation, carousels, team cards, knowledge base, and responsive styles are coupled to their respective modules.
  • NEW: Staff knowledge modules depend on shared CSS scope for theme-aware styling.
graph LR
MAIN["main.js"] --> NAV["navigation.js"]
MAIN --> CAR["carousel-system.js"]
MAIN --> ACC["accordion.js"]
MAIN --> TEAM["team-card-flip.js"]
MAIN --> POLL["poll-bar-animation.js"]
MAIN --> SKL["staff-knowledge-list.js"]
MAIN --> SKG["staff-knowledge-graph.js"]
MAIN --> SKT["staff-knowledge-toc.js"]
NAV --- NAVCSS["04-navigation.css"]
CAR --- CARCSS["08-carousel-shared-infrastructure.css"]
CAR --- TESTCSS["11-testimonials-carousel.css"]
TEAM --- TEAMCSS["12-team-grid-homepage-teaser.css"]
TEAM --- R900["26-responsive-mobile-max-width-900px.css"]
TEAM --- R600["27-responsive-small-mobile-max-width-600px.css"]
SKL --- KBSCOPE["47-staff-knowledge-scope.css"]
SKG --- KBSCOPE
SKT --- KBCSS["44-knowledge-base.css"]
CAR --- R900
CAR --- R600

Diagram sources

  • [main.js:1-37](file://src/assets/js/main.js#L1-L37)
  • [navigation.js:1-78](file://src/assets/js/modules/navigation.js#L1-L78)
  • [carousel-system.js:1-170](file://src/assets/js/modules/carousel-system.js#L1-L170)
  • [accordion.js:1-35](file://src/assets/js/modules/accordion.js#L1-L35)
  • [team-card-flip.js:1-14](file://src/assets/js/modules/team-card-flip.js#L1-L14)
  • [poll-bar-animation.js:1-20](file://src/assets/js/modules/poll-bar-animation.js#L1-L20)
  • [staff-knowledge-list.js:1-99](file://src/assets/js/modules/staff-knowledge-list.js#L1-L99)
  • [staff-knowledge-graph.js:1-217](file://src/assets/js/modules/staff-knowledge-graph.js#L1-L217)
  • [staff-knowledge-toc.js:1-48](file://src/assets/js/modules/staff-knowledge-toc.js#L1-L48)
  • [04-navigation.css:1-101](file://src/assets/css/modules/04-navigation.css#L1-L101)
  • [08-carousel-shared-infrastructure.css:1-90](file://src/assets/css/modules/08-carousel-shared-infrastructure.css#L1-L90)
  • [11-testimonials-carousel.css:1-93](file://src/assets/css/modules/11-testimonials-carousel.css#L1-L93)
  • [12-team-grid-homepage-teaser.css:1-117](file://src/assets/css/modules/12-team-grid-homepage-teaser.css#L1-L117)
  • [26-responsive-mobile-max-width-900px.css:1-358](file://src/assets/css/modules/26-responsive-mobile-max-width-900px.css#L1-L358)
  • [27-responsive-small-mobile-max-width-600px.css:1-36](file://src/assets/css/modules/27-responsive-small-mobile-max-width-600px.css#L1-L36)
  • [44-knowledge-base.css:1-898](file://src/assets/css/modules/44-knowledge-base.css#L1-L898)
  • [47-staff-knowledge-scope.css:1-612](file://src/assets/css/modules/47-staff-knowledge-scope.css#L1-L612)

Section sources

  • [main.js:1-37](file://src/assets/js/main.js#L1-L37)

Performance Considerations

  • Event listeners:
    • Passive scroll and resize listeners are used to improve scrolling performance.
    • Mousemove is throttled implicitly by browser compositing; consider requestAnimationFrame if heavy computations are added.
  • Animation:
    • CSS transforms and opacity are used for smooth transitions; avoid layout thrashing by batching DOM reads/writes.
    • Carousel uses scrollBy with smooth behavior; ensure hardware acceleration is effective by avoiding forced synchronous layouts.
    • NEW: D3 force simulation optimized with proper tick event handling.
  • IntersectionObserver:
    • Efficiently animates only visible elements; unobserving after animation prevents redundant work.
  • Memory:
    • Each module cleans up by not maintaining global state; rely on DOM selectors per activation.
    • NEW: Staff knowledge modules properly handle cleanup and event listeners.
  • Accessibility:
    • ARIA attributes and focus management reduce reflow and repaint overhead by avoiding forced focus jumps.
    • NEW: Enhanced accessibility for D3 graph with proper keyboard navigation.
  • Cross-browser:
    • Uses widely supported APIs (querySelectorAll, addEventListener, IntersectionObserver, getBoundingClientRect).
    • CSS fallbacks ensure functionality even if advanced features are missing.
    • NEW: D3.js dependency requires external loading for graph functionality.

Troubleshooting Guide

  • Navigation menu does not close on link click:
    • Verify that the menu contains .nav-link elements and that click handlers are attached.
    • Confirm that the toggle and menu elements exist in the DOM.
  • Focus trap not working:
    • Ensure the menu contains focusable elements and that the keydown handler is bound while the menu is active.
  • Carousel dots not rendering:
    • Check that the viewport has items and that the track selector matches the actual DOM structure.
    • Confirm that the dots container exists and is accessible.
  • Carousel buttons disabled unexpectedly:
    • Inspect scrollLeft boundaries and max scroll calculations; ensure snapPoints are generated.
  • Accordion content not resizing:
    • Ensure .accordion-inner exists and has measured height; otherwise, height falls back to auto.
  • Team card flip not triggering:
    • Confirm device detection via matchMedia and that .team-card elements exist.
  • Poll bars not animating:
    • Verify that .poll-bar-segment elements have the data-value attribute and are intersecting the viewport.
  • NEW: Staff knowledge graph not displaying:
    • Ensure D3.js is loaded before staff-knowledge-graph.js
    • Verify that /staff/knowledge/graph-data.json is accessible
    • Check that SVG container has proper dimensions
  • NEW: Staff knowledge list filters not working:
    • Confirm that data-* attributes are present on sections and rows
    • Verify that filter elements exist in the DOM
    • Check for JavaScript errors in the console
  • NEW: Staff knowledge TOC not generating:
    • Ensure that .knowledge-article-body contains h2/h3 headings
    • Verify that #knowledge-toc container exists
    • Check that the script is included on pages with table of contents

Section sources

  • [navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [carousel-system.js:14-167](file://src/assets/js/modules/carousel-system.js#L14-L167)
  • [accordion.js:4-32](file://src/assets/js/modules/accordion.js#L4-L32)
  • [team-card-flip.js:4-11](file://src/assets/js/modules/team-card-flip.js#L4-L11)
  • [poll-bar-animation.js:7-17](file://src/assets/js/modules/poll-bar-animation.js#L7-L17)
  • [staff-knowledge-graph.js:25-28](file://src/assets/js/modules/staff-knowledge-graph.js#L25-L28)
  • [staff-knowledge-list.js:11-13](file://src/assets/js/modules/staff-knowledge-list.js#L11-L13)
  • [staff-knowledge-toc.js:12-14](file://src/assets/js/modules/staff-knowledge-toc.js#L12-L14)

Conclusion

These modules deliver robust, accessible, and performant interactive experiences. They leverage modern web APIs, adhere to accessibility standards, and integrate cleanly with the existing CSS framework. Enhanced with new staff knowledge base functionality including interactive graph visualization, advanced filtering, and dynamic table of contents generation. Their modular design simplifies maintenance and extension while supporting complex user interactions.

Appendices

Configuration Options and Customization

  • Navigation
    • Selectors: .nav-toggle, .nav-menu, .nav-link
    • Behavior: toggles active classes, ARIA attributes, focus management
    • Customization: adjust selectors and ARIA labels to match markup
  • Carousel
    • Config array defines track, prev, next, and dots IDs
    • Dynamic dot rendering based on items per page
    • Customization: modify track selectors and button IDs to match templates
    • Enhanced: Added about carousel configuration
  • Accordion
    • Headers: .accordion-header
    • Items: .accordion-item
    • Content: .accordion-content, .accordion-inner
    • Customization: change class names to match templates
  • Team Card Flip
    • Selector: .team-card
    • Behavior: flips on click for touch devices only
    • Customization: update selector and CSS classes for card structure
  • Poll Bar Animation
    • Selector: .poll-bar-segment[data-value]
    • Behavior: animates width to dataset value on intersection
    • Customization: ensure data-value is present and CSS transition is configured
  • NEW: Staff Knowledge Graph
    • Data source: /staff/knowledge/graph-data.json
    • Container: #kb-graph SVG element
    • Reset button: [data-kb-graph-reset]
    • Customization: adjust D3 force parameters and color palette
  • NEW: Staff Knowledge List
    • Root container: [data-kb-root]
    • Search input: [data-kb-search]
    • Category filter: [data-kb-filter-category]
    • Status filter: [data-kb-filter-status]
    • Clear button: [data-kb-clear]
    • Customization: modify data-* attributes to match template structure
  • NEW: Staff Knowledge TOC
    • Container: #knowledge-toc
    • Content area: .knowledge-article-body
    • Customization: adjust heading selectors and styling classes

Section sources

  • [navigation.js:3-75](file://src/assets/js/modules/navigation.js#L3-L75)
  • [carousel-system.js:4-167](file://src/assets/js/modules/carousel-system.js#L4-L167)
  • [accordion.js:4-32](file://src/assets/js/modules/accordion.js#L4-L32)
  • [team-card-flip.js:4-11](file://src/assets/js/modules/team-card-flip.js#L4-L11)
  • [poll-bar-animation.js:4-17](file://src/assets/js/modules/poll-bar-animation.js#L4-L17)
  • [staff-knowledge-graph.js:16-23](file://src/assets/js/modules/staff-knowledge-graph.js#L16-L23)
  • [staff-knowledge-list.js:11-19](file://src/assets/js/modules/staff-knowledge-list.js#L11-L19)
  • [staff-knowledge-toc.js:12-14](file://src/assets/js/modules/staff-knowledge-toc.js#L12-L14)

Integration Patterns

  • Initialization: Import each module's init function in main.js and call it on DOMContentLoaded.
  • Event delegation: Prefer binding to static containers and using event bubbling for dynamic content.
  • DOM manipulation: Batch reads/writes, prefer transform and opacity for animations, and avoid layout triggers.
  • Accessibility: Provide ARIA roles, labels, and keyboard navigation; manage focus carefully.
  • Responsive: Use CSS media queries alongside JS logic to adapt behavior for different screen sizes.
  • NEW: Staff knowledge modules require proper CSS scoping with .staff-kb-scope class.
  • NEW: D3-based modules require external library loading and proper cleanup.
  • NEW: Filter modules rely on data-* attributes for efficient DOM traversal.

Section sources

  • [main.js:15-36](file://src/assets/js/main.js#L15-L36)
  • [staff-knowledge.njk:22](file://src/staff-knowledge.njk#L22)
  • [staff-knowledge-graph.njk:8](file://src/staff-knowledge-graph.njk#L8)
  • [staff-knowledge-article.njk:12](file://src/_includes/layouts/staff-knowledge-article.njk#L12)